<template>
    
    <!-- 组件的模板 -->
    <div class="page">
        <template v-for="item in reportInfo.info">
            <div class="weui-cells" v-if="item.type === 'Location'">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p class="isTitle">{{item.title}}</p>
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p class="isValue" v-if="item.value.addr_name && item.value.addr">{{item.value.addr_name+'('+item.value.addr+')'}}</p>
                        <p class="isValue" v-if="item.value.addr_name && !item.value.addr">{{item.value.addr_name}}</p>
                        <p class="isValue" v-if="!item.value.addr_name && item.value.addr">{{item.value.addr}}</p>
                        <p class="notValue" v-if="!item.value.addr_name && !item.value.addr">未填写</p>
                    </div>
                </div>
                <template v-for="s in statusArr">
                    <p class="error_tip" v-if="s.value == 5"><span class="bg_sprite error_icon"></span>{{s.name}}</p>
                </template>
                
            </div>
            <div class="weui-cells"  v-if="item.type === 'Date'">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p class="isTitle">{{item.title}}</p>
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p class="isValue" v-if="item.value">{{item.value}}</p>
                        <p class="notValue" v-else>未填写</p>
                    </div>
                </div>
            </div>
            <div class="weui-cells"  v-if="item.type === 'SingleText'">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p class="isTitle">{{item.title}}</p>
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p class="isValue" v-if="item.value">{{item.value}}</p>
                        <p class="notValue" v-else>未填写</p>
                    </div>
                </div>
            </div>
            
            <div class="weui-cells"  v-if="item.type === 'TextArea'">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p class="isTitle">{{item.title}}</p>
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p class="isValue" v-if="item.value">{{item.value}}</p>
                        <p class="notValue" v-else>未填写</p>
                    </div>
                </div>
            </div>
            <div class="weui-cells"  v-if="item.type === 'Number'">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p class="isTitle">{{item.title}}</p>
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p class="isValue" v-if="item.value">{{item.value}}</p>
                        <p class="notValue" v-else>未填写</p>
                    </div>
                </div>
            </div>
            <div class="weui-cells"  v-if="item.type === 'Select'">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p class="isTitle">{{item.title}}</p>
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <p class="isValue" v-if="item.value">{{item.value}}</p>
                        <p class="notValue" v-else>未填写</p>
                    </div>
                </div>
            </div>
            <div class="weui-cells weui-cells_form" v-if="item.type==='Imageview'">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <div class="weui-uploader">
                            <div class="weui-uploader__hd">
                                <p class="weui-uploader__title isTitle">{{item.title}}</p>
                            </div>
                            <div class="weui-uploader__bd" style="margin-bottom:0">
                                <ul class="weui-uploader__files" id="uploaderFiles" v-if="item.value.thumb_url.length">
                                    <li class="weui-uploader__file img" 
                                        v-for="imgurl in item.value.thumb_url"
                                        :style="'background-image:url('+imgurl+')'"
                                        @click="bigPicturePreview($parent.$index, $index)"
                                        >
                                    </li>
                                </ul>
                                <p class="notValue" v-else>未填写</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <div class="weui-cells"  v-if="abnormal_reason">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p class="isTitle">异常原因</p>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p class="isValue">{{abnormal_reason}}</p>
                </div>
            </div>
        </div>
<!--         <div class="mod-empty" v-if="reportInfo.info.length == 0">
            <div class="icon icon_1"></div>
            <p class="tip">暂无考勤记录</p>
        </div> -->
    </div>
    <div class="btn-box bg-color fixed" :style="isIphoneX?'padding-bottom:35px;':''" v-show="update_btn == 1" @click="reSubmit">
        <a href="javascript:;" class="weui-btn weui-btn_primary">重新打卡</a>
    </div>
    
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */

    import * as util from 'js/util.js'
    import cache from 'gapi/cache.js'
    import clientUi from 'gapi/clientUi.js'
    import commonPage from 'clientApi/commonPage.js'
    import widget from 'gapi/widget'
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    /**
     *  组件实例对象
     */
    export default {
        components: {

        },
        data: function(){
            return{
                abnormal_reason:'',
                update_btn:'',
                submit_time: '',
                statusArr:[],
                reportInfo : {
                    info:[]
                }
            }
        },
        computed: {
            isIphoneX: function(){
                return util.isIphoneX()
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){

                cache.getCache('KaoqinEditInfo', (data)=>{
                    console.log(JSON.stringify(data))
                    document.title = data.title
                    this.abnormal_reason = data.attendance.abnormal_reason
                    this.update_btn = data.attendance.update_btn
                    this.statusArr = data.attendance.status

                    let kqDetail = data.attendance.form_data
                    let kqInfo 
                    if(data.attendance.cross_attend == 1){
                        kqInfo  = data.extra_info.require_field_yesterday
                    }else{
                        kqInfo  = data.extra_info.require_field

                    }
                    kqDetail.forEach( (dItem) => {
                        kqInfo.forEach( (iItem) => {
                            if(dItem.id == iItem.id){
                                dItem.type = iItem.type
                                dItem.title = iItem.info.title
                            }
                        })
                        this.reportInfo.info.push(dItem)
                    })
                })
            },
            bigPicturePreview (parent_index, index){
                clientUi.bigPicturePreview('title', this.reportInfo.info[parent_index].value.url, index)
            },
            reSubmit(){
                location.href="dmsaas://KaoqinEditInfo"
            }
        },
        created(){

            this.init();
            
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<!-- <style src="../../static/css/attendance.css"></style> -->
<style type="text/css">
    html body{
        background-color: #f2f2f2;
    }
    p.isTitle{
        font-size: 14px;
        color:#666;
    }
    p.isValue{
        font-size: 16px;
        color:#333;
    }
    p.notValue{
        font-size: 16px;
        color: rgb(187, 187, 187)
    }
    li.img{
        overflow: hidden;
        width:60px;
        height:60px;
        /*box-sizing: border-box;
        margin-right:0;
        padding-right: 9px;*/
        margin-right: 8px;
        margin-bottom: 8px;
        border-radius: 2px;
    }
    li.img img{
        /*width:100%;*/
        width: 60px;
        /*height: 60px;*/
    }
    div.weui-uploader__input-box{
        width:60px;
        height:60px;
        margin-right: 8px;
        margin-bottom: 8px;
    }
    div.submit_time{
        text-align: center;
    }
    div.weui-cells{
        margin-top: 12px;
    }
    div.weui-cell__bd p {
         white-space: normal; 
         line-height: 22px;
        /* overflow: hidden; 
         text-overflow: ellipsis; */
    }
    div.weui-cells:last-child{
        margin-bottom: 100px;
    }
    .bg_sprite{
        display: inline-block;
        background-image: url(../../static/imgs/sprite.png);
        background-repeat: no-repeat;
        -webkit-background-size: 250px auto;
        background-size: 250px auto;
    }
    .error_tip{
       font-size: 14px;
       color: rgb(243,131,85);
       padding-left: 30px;
       margin-top: 2px;
       position: relative;
        margin-bottom: 7px;
    }
    .error_tip .error_icon{
        background-position: 0px -510px;
        position: absolute;
        width: 12px;
        height: 20px;
        left: 12px;
        top: 0px;
        z-index: 1;
    }
</style>


